<template>
	<view class="pubbox">
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar zIndex="998" :title="title" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->

		<view class="box">
			<view class="title">
				<fui-section style="padding: 0;" color="#fd5531" title="请选择分类" isLine></fui-section>
				<view class="wztype" v-if="type=='文章'">
					<view class="typelist">
						<view class="typeitem" v-for="(item,index) in classificationxm" :key="item._id"
							:class="data.form.category_id==item._id?'typeactive':''" @click="changetype(item._id)">
							<view class="typename">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="wztype" v-if="type=='应用'">
					<view class="typelist">
						<view class="typeitem" v-for="(item,index) in classificationrj" :key="item._id"
							:class="data.form.category_id==item._id?'typeactive':''" @click="changetype(item._id)">
							<view class="typename">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="wztype" v-if="type=='人脉'">
					<view class="typelist">
						<view class="typeitem" v-for="(item,index) in classificationrm" :key="item._id"
							:class="data.form.category_id==item._id?'typeactive':''" @click="changetype(item._id)">
							<view class="typename">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<fui-section style="margin-top: 40rpx;padding: 0;" v-if="type=='应用'" title="应用logo" color="#fd5531"
					isLine></fui-section>
				<uni-file-picker v-model="data.form.application_logo" :auto-upload="false" v-if="type=='应用'" ref="files"
					style="margin-top: 20rpx;" @delete="deconsteLogo" @select="successLogo" file-mediatype="image"
					mode="grid" :limit="1" />
				<fui-section style="margin-top: 40rpx;padding: 0;" :title="type+'名称'" color="#fd5531"
					isLine></fui-section>
				<fui-textarea :maxlength="data.maxTitLen" radius='15' v-model="data.form.title" style="margin-top: 20rpx;"
					backgroundColor="#f3f5f7" minHeight="200" placeholder="请输入标题"></fui-textarea>
				<fui-section v-if="type=='应用'" style="margin-top: 20rpx;padding: 0;" color="#fd5531" title="请选择下载链接"
					isLine></fui-section>
				<fui-textarea :maxlength="-1" v-if="type=='应用'" radius='15' v-model="data.form.application_url"
					style="margin-top: 20rpx;" backgroundColor="#f3f5f7" height="40rpx" min-height="40rpx"
					placeholder="请选择下载链接"></fui-textarea>
				<fui-section style="margin-top: 20rpx;padding: 0;" v-if="type=='应用'" title="应用摘要" color="#fd5531"
					isLine></fui-section>
				<fui-textarea :maxlength="-1" radius='15' v-if="type=='应用'" v-model="data.form.excerpt"
					style="margin-top: 20rpx;" backgroundColor="#f3f5f7" height="40rpx" min-height="40rpx"
					placeholder="请输入应用摘要"></fui-textarea>
				<fui-section style="margin-top: 20rpx;padding: 0;" color="#fd5531" title="内容描述" isLine></fui-section>
				<fui-textarea :maxlength="-1" minHeight="400rpx" radius='15' v-model="data.form.content" style="margin-top: 20rpx;"
					backgroundColor="#f3f5f7" placeholder="请输入描述"></fui-textarea>
				<fui-section v-if="type=='人脉'" style="margin-top: 20rpx;padding: 0;" color="#fd5531" title='人脉头像'
					isLine></fui-section>
				<uni-file-picker v-model="data.form.avatar" v-if="type=='人脉'" :auto-upload="false" ref="files"
					style="margin-top: 20rpx;" @select="selectAva" @delete="delAva" file-mediatype="image" mode="grid"
					:limit="1" />

				<fui-section style="margin-top: 20rpx;padding: 0;" color="#fd5531" :title="type=='人脉'?'添加二维码图片':'添加图片'"
					isLine></fui-section>
				<uni-file-picker v-if="type=='文章'" v-model="data.form.articles_img" :auto-upload="false" ref="files"
					style="margin-top: 20rpx;" @select="selectIMG" @delete="delIMG" file-mediatype="image" mode="grid"
					:limit="limit" />
				<uni-file-picker v-if="type=='人脉'" v-model="data.form.connection_img" :auto-upload="false" ref="files"
					style="margin-top: 20rpx;" @select="selectIMG" @delete="delIMG" file-mediatype="image" mode="grid"
					:limit="limit" />
				<uni-file-picker v-if="type=='应用'" v-model="data.form.application_img" :auto-upload="false" ref="files"
					style="margin-top: 20rpx;" @select="selectIMG" @delete="delIMG" file-mediatype="image" mode="grid"
					:limit="limit" />

			</view>
		</view>
		<view style="position: fixed;bottom: 30rpx;width: 100vw;z-index: 999;display: flex;justify-content: center;">
			<fui-button style="background: linear-gradient(to right top, #ff6f49, #ff5a5e);" width="95%" text="确认修改" @click="publish"></fui-button>
		</view>
		<fui-loading v-if="data.loading" :isFixed="true" srcCol="/static/images/component/loading_white.png" text="正在加载..."></fui-loading>
	</view>
</template>

<script setup>
	import { ConfigStore } from '@/store/modules/config.js'
	const articleApi = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import { replaceImg } from '@/utils/index.js'
	import { useUploadFile } from '@/hooks/useUploadFile.js'
	const { uploadFile, deleteFile, getFileInfo } = useUploadFile()
	import { LoginStore } from "@/store/modules/login.js";
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, reactive, computed } from 'vue'
	const userInfo = computed(() => (LoginStore().userInfo))
	const classificationxm = computed(() => (ConfigStore().classification["0"]))
	const classificationrj = computed(() => (ConfigStore().classification["1"]))
	const classificationrm = computed(() => (ConfigStore().classification["2"]))
	const type = ref(null)
	const title = ref('编辑')
	const show = ref(true)
	const roofindex = ref(0)
	const limit = ref(9)
	const rooflist = reactive([{
		name: '不置顶',
		day: 0,
		price: 0
	}, {
		name: '置顶1天',
		day: 1,
		price: 6
	}, {
		name: '置顶3天',
		day: 3,
		price: 18
	}, {
		name: '置顶7天',
		day: 7,
		price: 35
	}, {
		name: '置顶15天',
		day: 15,
		price: 60
	}, {
		name: '置顶30天',
		day: 30,
		price: 99
	}])
	const data = reactive({
		form: {},
		loading:false,
		maxTitLen:"", //标题最长限制
		maxConLen:-1, //人脉内容最长限制
	})

	onLoad(async (e) => {
		let ev = JSON.parse(e.item)
		type.value = ev.type
		title.value += ev.type
		const resDetail = await articleApi.getAdDetails(ev)
		data.form = resDetail.data
		data.form.publish_type = ev.publish_type
		data.form.user_id = userInfo?.value?._id
		data.form.application_logo = replaceImg(data.form.application_logo)
		data.form.application_img = replaceImg(data.form.application_img)
		data.form.articles_img = replaceImg(data.form.articles_img)
		data.form.avatar = replaceImg(data.form.avatar)
		data.form.connection_img = replaceImg(data.form.connection_img)
		if (ev.type == '文章') {
			data.maxTitLen = 50
			limit.value = 9
		} else if (ev.type == '人脉') {
			data.maxTitLen = 30
			data.maxConLen = 50
			limit.value = 1
		} else {
			data.maxTitLen = 10
			limit.value = 9
		}
	})
	const model = reactive({
		showmodal: false,
		ranking: null,
		showTop: false,
		topList: []
	})
	const selectTop = () => {
		model.showTop = true
	}
	//选择排名
	const TopConfirm = (e) => {
		model.ranking = e.options.value
		model.showTop = false
	}
	//关闭排名
	const TopClose = () => {
		model.showTop = false
	}
	//是否选择头条
	const changeSwitch = (e) => {
		model.showmodal = e.detail.value
		data.form.is_headline = e.detail.value
	}
	//关闭model遮罩层
	const onCancel = () => {
		model.showmodal = false
		data.form.is_headline = false
	}
	const sure = (e) => {
		if (!model.ranking) return uni.fui.toast('请选择头条排名')
		if (!data.form.sticky_time) return uni.fui.toast('请输入头条天数')
	}

	function changetype(index) {
		data.form.category_id = index
	}

	function roof(item, index) {
		if (index !== 0) {
			data.form.is_sticky = true
			data.form.sticky_time = item.day
		} else {
			data.form.is_sticky = false
		}
		roofindex.value = index
	}

	// #ifdef H5
	function leftClick() {
		uni.navigateBack()
	}
	// #endif

	function closePopup() {
		show.value = false
	}

	function btnClick() {
		show.value = false
	}
	//上传logo图片
	let fileIDLogo = []
	const successLogo = async (e) => {
		const res = await uploadFile(e.tempFiles, 'application', 'url')
		fileIDLogo = res
		data.form.application_logo = replaceImg(fileIDLogo[0].fileID)
	}
	const deconsteLogo = (e) => {
		deleteFile(fileIDLogo, e)
		fileIDLogo.forEach((vm, i) => {
			if (vm.filePath == e.tempFilePath) {
				fileIDLogo.splice(i, 1)
			}
		})
	}
	//上传人脉图片
	let fileren = []
	const selectAva = async (e) => {
		const res = await uploadFile(e.tempFiles, 'article', 'url')
		fileren = res
		data.form.avatar = replaceImg(fileren[0].fileID)
	}

	const delAva = (e) => {
		deleteFile(fileren, e)
		fileren.forEach((vm, i) => {
			if (vm.filePath == e.tempFilePath) {
				fileren.splice(i, 1)
			}
		})
	}

	//上传图片
	let fileIDs = []
	const selectIMG = async (e) => {
		const res = await uploadFile(e.tempFiles, 'resources', 'file')
		res.forEach(item => {
			fileIDs.push(item)
		})
		if (type.value == '人脉') {
			data.form.connection_img = replaceImg(fileIDs[0].fileID)
		}
		if(type.value == '应用'){
			data.form.application_url = replaceImg(fileIDs[0].fileID)
		}
	}

	const delIMG = (e) => {
		if (type.value == '文章') {
			data.form.articles_img.forEach((item, index) => {
				if (item.url == e.tempFilePath) {
					data.form.articles_img.splice(index, 1)
				}
			})
		} else if (type.value == '应用') {
			data.form.application_img.forEach((item, index) => {
				if (item.url == e.tempFilePath) {
					data.form.application_img.splice(index, 1)
				}
			})
		}

		deleteFile(fileIDs, e)
		fileIDs.forEach((vm, i) => {
			if (vm.filePath == e.tempFilePath) {
				fileIDs.splice(i, 1)
			}
		})
	}

	//发布
	async function publish() {
		if (data.form.title == '') return uni.fui.toast('请填写标题')
		if (data.form.text == '') return uni.fui.toast('请填写内容')
		if (data.form.is_sticky == false) {
			delete data.form.sticky_time
		}
		if (type.value == '文章') {
			data.form.articles_img = data.form.articles_img.map(x => x.url).concat(fileIDs.map(x => x.url))
			data.form.articles_img = data.form.articles_img.filter((item => {
				return item.indexOf('https') !== -1
			}))
			if (data.form.articles_img.length == 0) return uni.fui.toast('最少上传一张图片')
			
		} else if (type.value == '应用') {
			if (data.form.application_logo.length == 0) return uni.fui.toast('请上传应用LOGO')
			if (!data.form.application_url) return uni.fui.toast('请上传应用下载地址')
			if (data.form.application_url.indexOf('http') == -1) return uni.fui.toast('请输入正确的下载链接')

			data.form.application_img = data.form.application_img.map(x => x.url).concat(fileIDs.map(x => x.url))
			data.form.application_img = data.form.application_img.filter((item => {
				return item.indexOf('https') !== -1
			}))

			if (data.form.application_img.length == 0) return uni.fui.toast('最少上传一张图片')
			if (data.form.application_logo.length == 0) {
				data.form.application_logo = fileIDLogo[0].fileID
			}else{
				data.form.application_logo = data.form.application_logo[0].url
			}
			// data.form.application_logo = data.form.application_logo[0].url
		} else {
			if (data.form.avatar.length == 0) return uni.fui.toast('请上传人脉头像')
			if (data.form.connection_img.length == 0) return uni.fui.toast('请上传二维码图片')
			if (data.form.avatar.length == 0) {
				data.form.avatar = fileren[0].fileID
			}
			data.form.avatar = data.form.avatar[0].url

			if (data.form.connection_img.length == 0) {
				data.form.avatar = fileIDs[0].fileID
			}
			data.form.connection_img = data.form.connection_img[0].url
		}
		try{
			data.loading = true
			const res = await articleApi.updateAd({...data.form,auth_audit: userInfo?.value?.vipPower?.auth_audit})
			data.loading = false
			uni.fui.toast(res.errMsg)
			if (res.errCode == 0) {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		}catch(e){
			data.loading = false
		}
		
		uni.$emit('resetUpScroll')
	}
</script>

<style lang="scss" scoped>
	:deep() {
		.file-picker__box-content {
			background-color: #f8f9f9;
		}
	}

	.fui-switch__input {
		margin-left: 40rpx;
	}

	.top_box {
		padding: 32rpx 32rpx 12rpx 32rpx;
	}

	.typelist {
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}

	.typeitem {
		border: 1px solid #333333;
		padding: 0rpx 38rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.typeactive {
		background: linear-gradient(to right top, #ff6f49, #ff5a5e);
		border: 1px solid var(--fui-color-primary);
		color: #fff;
	}

	.typename {
		font-size: 26rpx;
	}

	.rooflist {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.roofitem {
		display: flex;
		width: 20%;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		background-color: #f3f5f7;
		margin-top: 20rpx;
		padding: 52rpx 32rpx;
		border-radius: 16rpx;
	}

	.roofactive {
		border: 1px solid var(--fui-color-primary);
	}

	.roofname {
		color: var(--fui-color-subtitle);
		font-size: 26rpx;
	}

	.roofprice {
		color: var(--fui-color-primary);
		font-weight: bold;
		font-size: 40rpx;
	}

	.file-picker__box {
		background-color: #f3f5f7 !important;
	}

	.box {
		min-height: 100vh;
		padding: 22rpx;
	}

	.container {
		width: 100%;
		background-color: var(--fui-bg-color);
	}

	.title {
		padding-bottom: 200rpx;
		// text-align: center;
		font-size: 35rpx;
		font-weight: bold;
	}

	.fui-ani__box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 64rpx;
	}

	.fui-hd__img {
		width: 100%;
		height: 192rpx;
		display: block;
	}

	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding: 54rpx 0 32rpx;
		text-align: center;
	}

	.fui-desc {
		padding: 0 54rpx 82rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.fui-desc text {
		color: #FF2B2B;
	}

	.pubbox {
		background-color: var(--fui-bg-color);
	}
</style>